<template>
	<up-tabbar :value="activeTabName" @change="changeTab" activeColor="#00aaff" inactiveColor="#7A7E83" :z-index="10">
		<up-tabbar-item v-for="(item, index) in tabbarList" :key="item.name" :text="item.text" :name="item.name"
			:icon="item.icon" />
	</up-tabbar>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive
	} from "vue";
	onLoad(() => {
		// #ifndef APP
		uni.hideTabBar(); // 隐藏原生tabBar
		// #endif
	});
	const props = defineProps({
		activeTabName: {
			type: String,
			required: true,
			default: "index",
		},
	});
	let tabbarList = [{
			pagePath: "/pages/index/index",
			text: "首页",
			icon: "home",
			name: "index",
		},
		{
			pagePath: "/pages/category/category",
			text: "分类",
			icon: "list-dot",
			name: "category",
		},
		{
			pagePath: "/pages/list/list",
			text: "科普",
			icon: "bookmark",
			name: "list",
		},
		{
			pagePath: "/pages/mine/mine",
			text: "我的",
			icon: "account",
			name: "mine",
		},
	];

	function changeTab(name) {
		if (props.activeTabName === name) {
			return;
		}
		uni.switchTab({
			url: tabbarList.filter((e) => e.name === name)[0].pagePath,
		});
	}
</script>

<style></style>